<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap table -->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <!--bootstrap-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--bootstrap-table-->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
    <!--bootstrap-table-lanuage-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
</head>
<script>
    $(function(){
        initTable();
    });
    function initTable(){
        $('#table').bootstrapTable({
            method:'GET',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url:"loglist",
            pagination:true,
            pageSize : 5,//单页记录数
            pageList : [ 5, 10, 20, 30 ],
            //可选择单页记录数
            search:true,
            queryParams : function(params){
                var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                    limit : params.limit, // 每页显示数量
                    offset : params.offset, // SQL语句起始索引
                    page : (params.offset / params.limit) + 1, //当前页码
                };
                return temp;
            },
            columns: [
                {
                    field : 'ip',
                    title : '操作IP',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'name',
                    title : '操作角色',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }, {
                    field : 'date',
                    title : '操作时间',
                    align : 'center',
                    valign : 'middle'
                }, {
                    field : 'content',
                    title : '操作内容',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                }]
        });
    }
    function daochu() {
        location="daochu";
    }
</script>
<body>
<div class="container">
    <input value="导出Excel" type="button" onclick="daochu()" style="margin-top: 5px">
    <div class="select">
    </div>
    <div>
        <table id="table"></table>
    </div>
</div>
</body>
</html>